<template>
	<view class="page-content">
		<f-navbar title="首页" :isShowLeft="false"></f-navbar>
		<view class="content-box">
			<view class="header-block flex align-center" v-if="userInfo">
				<image class="avatar" :src="require(`@/static/images/common/pic1.png`)" mode="aspectFill">
				</image>
				<view class="flex-sub user-info">
					<view class="flex align-center">
						<view class="name text-cut text-cut1">{{userInfo.nickName}}</view>
						<image class="margin-left card-icon" src="@/static/images/common/mine_card.png" @click="showCardModal">
						</image>
					</view>
					<view class="remark">{{userInfo.myUnitName}}</view>
					<view class="tag">{{userInfo.position}}</view>
				</view>
			</view>
			<view class="notice-block flex align-center" v-if="noticeList.length" @click="goLink(`/pages/common/notice`)">
				<image class="notice-icon" src="@/static/images/common/notice_icon.png"></image>
				<swiper vertical autoplay circular interval="3000" class="notice-swiper flex-sub">
					<swiper-item v-for="(item,index) in noticeList" :key="index">
						<view class="text-cut text-cut1">{{item.noticeTitle}}</view>
					</swiper-item>
				</swiper>
				<u-icon name="arrow-right" size="28rpx" bold color="#333333"></u-icon>
			</view>
			<view class="count-box">
				<view class="count-item flex flex-direction align-center justify-center" v-for="(item,index) in countList"
					:key="index" @click="goLink(item.url,item.openType,item.status)" >
					<view class="item-value">{{item.value||'--'}}</view>
					<view class="item-label">{{item.label}}</view>
				</view>
			</view>
			<view class="menu-box">
				<view class="menu-item flex align-center" v-for="(item,index) in menuList" :key="index"
					@click="jumpDetail(item)">
					<image class="item-icon" :src="item.icon"></image>
					<view class="flex-sub">{{item.label}}</view>
					<u-badge numberType="overflow" bgColor="#DF0E0E" max="99" :value="item.badge" v-if="item.badge"></u-badge>
					<u-icon name="arrow-right" size="28rpx" bold color="#333333"></u-icon>
				</view>
			</view>
		</view>

		<tabbar :tabIndex="0"></tabbar>
		<cardModal ref="cardModal"></cardModal>
	</view>
</template>
<script>
	import cardModal from "@/components/pageLayout/screenModal/cardModal.vue"
	import tabbar from "@/components/tabbar/index.vue"
	import {
		getPlatformConfig,
		getNoticeList,
		getIndexCount
	} from "@/api/common.js"
	export default {
		components: {
			tabbar,
			cardModal
		},
		data() {
			return {
				// 订单状态,1待接单,2待开始,3进行中4已完成5已取消
				countList: [{
					label: '待接任务数量',
					value: 0,
					url:`/pages/task/index`,
					openType:'switch',
					status:'1'
				}, {
					label: '待运数量',
					value: 0,
					url:`/pages/task/index`,
					openType:'switch',
					status:'2'
				}, {
					label: '已完成任务数量',
					value: 0,
					url:`/pages/task/index`,
					openType:'switch',
					status:'4'
				}, {
					label: '报警次数',
					value: 0,
					url:`/pages/police/index`,
					openType:'switch',
					status:'0'
				}],
				menuList: [{
					label: '联系平台',
					icon: require(`@/static/images/common/call_icon.png`),
					url: `call`
				}, {
					label: '消息中心',
					icon: require(`@/static/images/common/msg_icon.png`),
					url: `/pages/common/message`,
					badge:0
				}, {
					label: '设置',
					icon: require(`@/static/images/common/set_icon.png`),
					url: `/pages/common/setting`
				}],
				noticeList: [],
				platformPhone: null
			};
		},
		onPageScroll(e) {

		},
		onReady() {

		},
		onShow() {		
			uni.hideTabBar();
			if (uni.getStorageSync('token')){
				this.$store.dispatch("actionGetUserInfo");
				this.getData();
			}else{
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}
		},
		onLoad(option) {
			console.log(this.userInfo)
		},
		onHide() {

		},
		methods: {
			getData() {
				//获取平台电话
				getPlatformConfig({
					configKey: 'platform_phone'
				}).then((res) => {
					this.platformPhone = res.rows[0].configValue
				})
				//获取公告
				getNoticeList({
					pageNum:1,
					pageSize: 10
				}).then((res) => {
					this.noticeList = res.data.records
				})
				//获取统计数据
				getIndexCount().then((res) => {
					const data = res.data;
					this.countList[0].value = data.pendingTasksNum
					this.countList[1].value = data.shippedTasksNum
					this.countList[2].value = data.completeTasksNum
					this.countList[3].value = data.alarmsNumber
					
					this.menuList[1].badge = data.messageNumber
				})
			},
			jumpDetail(item) {
				// if (item.url.includes("message")) {
				// 	uni.$u.toast('敬请期待');
				// 	return;
				// }
				if (item.url == 'call') {
					this.telPhone(this.platformPhone)
				} else {
					this.goLink(item.url)
				}
			},
			showCardModal() {
				this.$refs.cardModal.showModal();
			}
		},
	};
</script>
<style lang="scss" scoped>
	.page-content {

		.content-box {
			padding: 32rpx;
		}

		.header-block {
			padding: 56rpx 40rpx;
			background: linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%);
			border-radius: 13rpx;
			background-image: url('@/static/images/common/mine_bg.png');
			background-size: 100% 100%;

			.avatar {
				width: 135rpx;
				height: 135rpx;
				border: 4rpx solid #ffffff;
				border-radius: 50%;
				margin-right: 32rpx;
			}

			.user-info {
				color: #ffffff;

				.name {
					font-size: 40rpx;
					font-weight: bold;
					max-width: 360rpx;
				}

				.card-icon {
					width: 39rpx;
					height: 39rpx;
				}

				.remark {
					margin-top: 4rpx;
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.6);
				}

				.tag {
					margin-top: 8rpx;
					display: inline-block;
					padding: 0 18rpx;
					height: 35rpx;
					line-height: 35rpx;
					background: #FFBC1A;
					border-radius: 50rpx;
					font-size: 24rpx;
				}
			}
		}

		.notice-block {
			margin-top: 30rpx;
			height: 84rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 13rpx;
			padding: 0 24rpx 0 30rpx;

			.notice-icon {
				width: 34rpx;
				height: 34rpx;
			}

			.notice-swiper {
				height: 40rpx;
				line-height: 40rpx;
				margin: 0 16rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.count-box {
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 31rpx;

			.count-item {
				width: 100%;
				height: 177rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 13rpx;

				.item-value {
					font-size: 50rpx;
					color: #000000;
					font-weight: bold;
				}

				.item-label {
					color: #666668;
					font-size: 30rpx;
					margin-top: 12rpx;
				}
			}
		}

		.menu-box {
			margin-top: 30rpx;
			padding: 0 30rpx;
			background: #ffffff;
			border-radius: 16rpx;

			.menu-item {
				height: 130rpx;
				border-bottom: 1rpx solid #EFEFEF;
				font-size: 32rpx;

				&:last-child {
					border: none;
				}

				.item-icon {
					width: 67rpx;
					height: 67rpx;
					margin-right: 32rpx;
				}
			}
		}
	}
</style>